<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			loadGoods();
		})
		//连接servlet 获取 数据
		function loadGoods(){
			$.ajax({
				url:"${pageContext.request.contextPath}/goods?method=get1",
				method:"get",
				success:function(data){
					showMsg(data);
				},
				error:function(XMLHttpRequest,textStatus,errorThrown){
					alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
				}
			});
		}

		$(function(){
			$("#example${goods.id}").popover();
		})
		//显示商品信息
		function showMsg(data){
			var list = JSON.parse(data);
			$("#tb_list").html("<tr class='tr_head'><td>序号</td><td>商品名称</td><td>商品简介</td><td>价格</td><td>图片</td><td>类型</td><td>操作</td></tr>");
			var i = 1;
			for(var u in list){
//声明 tr  td  对象
				var tr = $("<tr></tr>");
				var td1 = $("<td>"+(i++)+"</td>");
				var td2 = $("<td width=\"200px\">"+list[u].name+"</td>");
				var td8 = $("<td width=\"200px\">"+list[u].intro+"</td>");
				var td3 = $("<td>"+list[u].price+"</td>");
				var td4 = $("<td> <img width=\"100px\" height=\"100px\" src='"+list[u].picture+"'></td>");
				var td6 = $("<td>"+list[u].typeName+"</td>");
				//var td8 = $("<td><a tabindex='0' id='example"+list[u].id+"' class='btn btn-primary btn-xs' role='button' data-toggle='popover' data-trigger='focus' data-placement='left' data-content='"+list[u].intro+"'>描述</a> </td> ");
				//var td7 = $("<td><a href='javascript:updateGoods("+list[u].id+")' class='btn btn-primary btn-xs'>修改</a><br><br><a href='javascript:deleteGoods("+list[u].id+")' class='btn btn-primary btn-xs'>删除</a><br><br><a  class='btn btn-primary btn-xs'href='javascript:introGoods("+list[u].id+")'>描述</a></td><br>");
				var td7 = $("<td><a href='javascript:updateGoods("+list[u].id+")' class='btn btn-primary btn-xs'>修改</a><br><br><a href='javascript:deleteGoods("+list[u].id+")' class='btn btn-primary btn-xs'>删除</a></td><br>");





				//将td 添加到tr中
				tr.append(td1);
				tr.append(td2);
				tr.append(td8);
				tr.append(td3);
				tr.append(td4);
				tr.append(td6);
				tr.append(td7);
				//tr.append(td8)
				$("#tb_list").append(tr);

			}
		}


		//修改类型
		function updateGoods(id){
			if(confirm("确认要更新吗?")){
				location.href = "${pageContext.request.contextPath}/goods?method=update&id="+id
			}
		}

		//删除类型
		function deleteGoods(id){
			if(confirm("确认要删除吗?")){
				$.ajax({
					url:"${pageContext.request.contextPath}/goods?method=delete&id="+id,
					method:"get",
					success:function(data){
							loadGoods();
					},
					error:function(XMLHttpRequest,textStatus,errorThrown){
						alert("失败"+"，该类型存在子类，无法删除！");
					}
				})
			}
		}
		//条件查询
		$(function(){
			//给查询按钮 添加 点击事件
			$("#search").click(function(){
				var name = $("input[name='name']").val();
				var price = $("input[name='price']").val();

				//使用ajax 进行异步交互
				$.ajax({
					url:"${pageContext.request.contextPath}/goods?method=search&name="+name+"&price="+price,
					method:"post",
					success:function(data){
						if(data==0){
							alert("未找到指定内容");
							$("input[name='level']").val("");
							$("input[name='goodsname']").removeAttr("checked");
						}else{
							showMsg(data);
						}
					},
					error:function(XMLHttpRequest,textStatus,errorThrown){
						alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
					}
				})
			})
		})
	</script>

<title>商品列表</title>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

		<div class="panel panel-default">
			<div class="panel-heading">
				商品列表
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
						<div class="form-group form-inline">
							<span>商品名称</span>
							<input type="text" name="name" class="form-control">
						</div>
					</div>
					<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
						<div class="form-group form-inline">
							<span>商品价格</span>
							<input type="text" name="price" class="form-control">
						</div>
					</div>
					<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
						<button type="button" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>
					</div>
				</div>
				<div style="height: 400px;overflow: scroll;">
					<!-- 列表显示 -->
					<table id="tb_list" class="table table-striped table-hover table-bordered">

					</table>
				</div>
				<script type="text/javascript">
					$(function(){
						$("#example${goods.id}").popover();
					})
				</script>
			</div>
			
		</div>
	</div>
</div>
</body>
</html>


